Schema markup is a specific type of structured data that is added to a webpage’s HTML code to help search engines better understand the content on the page.
Even though search engines are extremely effective tools with cutting-edge algorithms, they still require assistance to scan, recognise, and classify the content.
Why? The visual and intuitive abilities that people possess are not shared by search engines. They must read it because they can’t see an image. It would be obvious to you if you read a list of components and amounts that it is a recipe, but a search engine wouldn’t.
Applying schema markup to your content will aid in the understanding of your sites by search engines.
Here’s a complete schema markup guide and structured data and how to utilise it to improve your SEO results!
Table of Content
- What is Schema Markup?
- Structured Data for your website
- Schema markup types
- How to Generate & Test Your Schema for Your HTML
- Benefits of Schema Markup & Why It’s Important for SEO
- Schema Markup Generator Tools
What is Schema Markup?
Schema markup is created using a vocabulary of tags or “schemas” that define specific types of content such as events, products, recipes, reviews, and more. These tags include properties and values that provide specific details about the content, such as the name of a product, its price, availability, and reviews.
Schema markup code can also be used to provide information about the organization or website as a whole, such as its name, logo, and social media profiles.
This can help search engines better understand the website and its content, and may also result in additional features such as rich snippets in search results.
When your website has excellent material, you don’t want to keep it hidden; rather, you want to showcase it to as many website visitors as you can.
Ranking well on the search engine results page is an essential component of this, since it will increase traffic to your website. They will click to another website if they can’t find yours with adequate ease.
Simply said, you need to ensure that search engines understand what your content is. You must converse with them in their language so they can understand your material (both textual and visual).
Also, you can add schema markup—structured data in the form of code—to your website to help search engines comprehend your pages and content components.
Structured Data for Your Website
Google Search makes a lot of effort to comprehend a page’s information. By incorporating structured data on the website, you can assist it by giving Google clear hints about the purpose of the page.
Structured data is a standardised format for providing details about a page and categorising the content of the page. For instance, on a recipe page, structured data may include the ingredients required for the dish, the cooking time and temperature, the calories, and so forth.
Rich results, which are made possible by adding structured data, are search results that are more interesting for users and may motivate them to engage with your website more frequently.
Structured Data as Seen by Humans
As Seen by the Search Engine
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Recipe", "name": "The Best Chocolate Chip Cookie Recipe Ever", "image": "https://www.example.com/chocolate-chip-cookies.jpg", "author": { "@type": "Person", "name": "Jane Doe" }, "datePublished": "2023-04-11", "description": "Learn how to make the best chocolate chip cookies ever with this easy recipe.", "prepTime": "PT20M", "cookTime": "PT10M", "totalTime": "PT30M", "recipeYield": "24 cookies", "recipeIngredient": ["2 1/4 cups all-purpose flour", "1 tsp baking soda", "1 tsp salt", "1 cup unsalted butter, softened", "3/4 cup white sugar", "3/4 cup brown sugar", "2 large eggs", "2 tsp vanilla extract", "2 cups semisweet chocolate chips"], "recipeInstructions": [{ "@type": "HowToStep", "text": "Preheat the oven to 375°F (190°C)." }, { "@type": "HowToStep", "text": "In a medium bowl, whisk together the flour, baking soda, and salt." }, { "@type": "HowToStep", "text": "In a large bowl, beat the butter, white sugar, and brown sugar until creamy." }, { "@type": "HowToStep", "text": "Add the eggs and vanilla extract to the large bowl, and beat until well combined." }, { "@type": "HowToStep", "text": "Gradually stir in the flour mixture, and then fold in the chocolate chips." }, { "@type": "HowToStep", "text": "Drop spoonfuls of the cookie dough onto a baking sheet lined with parchment paper." }, { "@type": "HowToStep", "text": "Bake for 8-10 minutes, or until the edges are golden brown." }, { "@type": "HowToStep", "text": "Let the cookies cool on the baking sheet for 5 minutes before transferring them to a wire rack to cool completely." }], "nutrition": { "@type": "NutritionInformation", "calories": "240 calories per cookie", "fatContent": "12 grams per cookie" } } </script>
Rich Results
Rich results, also known as rich snippets or enhanced search results, are search results that display additional information and visual elements beyond the traditional blue link, title, and description.
These additional elements can include images, reviews, ratings, events, recipes, and more, depending on the type of content and the structured data markup used on the website.
Rich results are powered by structured data markup, which is added to a website’s HTML code to provide search engines with specific information about the content of the page. When search engines crawl and index the page, they use this structured data to display rich results in the search results page.
Schema Markup Types
The coding known as schema markup explains elements on your website in a language that is understood by all of the major search engines. Search engines can then show people more relevant results in this manner.
Schema markup is a structured data vocabulary that helps search engines understand the content on a webpage. There are various types of schema markup available that can be used to mark up different types of content.
Here are some of the most common schema markup types:
Organization Schema Markup
Organization Schema Markup is a type of structured data markup that webmasters can add to their website’s HTML code to provide search engines with more detailed information about their organization.
The schema markup helps search engines understand the relationships and hierarchy between different entities related to an organization, such as its name, logo, location, contacts, social media profiles, and more.
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Organization", "name": "Example Company", "url": "https://www.example.com", "logo": "https://www.example.com/logo.png", "description": "A brief description of the company.", "address": { "@type": "PostalAddress", "streetAddress": "123 Main Street", "addressLocality": "Anytown", "addressRegion": "CA", "postalCode": "12345", "addressCountry": "US" }, "contactPoint": { "@type": "ContactPoint", "telephone": "+1-555-555-5555", "contactType": "customer support" }, "sameAs": [ "https://www.facebook.com/example", "https://twitter.com/example", "https://www.linkedin.com/company/example" ] } </script>
Logo Markup
Logo schema markup is a type of schema markup that allows website owners to provide search engines with information about their website’s logo. This markup provides search engines with details about the image, such as its URL, dimensions, and the file format used.
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "url": "https://www.example.com", "logo": "https://www.example.com/images/logo.png" "width": "200", "height": "100" } </script>
By adding logo schema markup to a website, search engines can display a website’s logo in search results, which can help improve brand recognition and click-through rates.
The logo schema markup can also be used to specify the logo for a company or organization, which can be used in rich snippets for the organization in search results.
To implement logo schema markup, website owners can add structured data to their website’s code using JSON-LD, microdata, or RDFa. They can specify the URL of the logo image, its dimensions, file format, and other relevant details.
This markup helps search engines identify the logo image and display it in search results when appropriate.
Review Markup
Review Schema Markup allows webmasters to provide search engines with detailed information about a product or service being reviewed, including the name of the item, the author of the review, the date of the review, the rating is given, and other relevant nformation.
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Review", "itemReviewed": { "@type": "Restaurant", "image": "https://www.example.com/seafood-restaurant.jpg", "name": "Legal Seafood", "servesCuisine": "Seafood", "priceRange": "$$$", "telephone": "1234567", "address" :{ "@type": "PostalAddress", "streetAddress": "123 William St", "addressLocality": "New York", "addressRegion": "NY", "postalCode": "10038", "addressCountry": "US" } }, "reviewRating": { "@type": "Rating", "ratingValue": "4" }, "name": "A good seafood place.", "author": { "@type": "Person", "name": "Bob Smith" }, "publisher": { "@type": "Organization", "name": "Washington Times" } } </script>
This data can be used to generate rich snippets in search results, which can include information such as the rating, number of reviews, and price range of the product or service.
Product Schema
Product Schema Markup can include information such as the product name, description, price, availability, brand, manufacturer, model number, colour, size, weight, dimensions, and more.
<div itemscope itemtype="http://schema.org/Product"> <meta itemprop="name" content="Amazon Alexa"> <meta itemprop="description" content="Alexa is a voice-activated virtual assistant designed and developed by Amazon."> <meta itemprop="image" content="https://example.com/alexa.jpg"> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta itemprop="price" content="99.99"> <meta itemprop="priceCurrency" content="USD"> <meta itemprop="availability" content="http://schema.org/InStock"> <meta itemprop="url" content="https://example.com/alexa.html"> </div> </div>
By providing this information in a standardized format, search engines can display more relevant and detailed information about the product in search results, which can help improve click-through rates and drive more traffic to the product page.
In addition to improving search engine visibility, the Product Schema Markup can also be used by other applications, such as social media platforms and shopping apps, to display product information in a more useful and engaging way.
Local Business Markup
Local Business Schema Markup is a type of structured data markup that helps search engines understand the specific details of a local business. It provides additional information about the business, including its name, address, phone number, hours of operation, website, and more.
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "LocalBusiness", "name": "Example Business", "image": "https://www.example.com/logo.png", "address": { "@type": "PostalAddress", "streetAddress": "123 Main Street", "addressLocality": "Anytown", "addressRegion": "CA", "postalCode": "12345", "addressCountry": "US" }, "telephone": "+1-555-555-5555", "priceRange": "$$", "url": "https://www.example.com", "sameAs": [ "https://www.facebook.com/example", "https://twitter.com/example", "https://www.linkedin.com/company/example" ], "openingHoursSpecification": [ { "@type": "OpeningHoursSpecification", "dayOfWeek": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" ], "opens": "09:00", "closes": "18:00" }, { "@type": "OpeningHoursSpecification", "dayOfWeek": "Saturday", "opens": "09:00", "closes": "13:00" } ], "geo": { "@type": "GeoCoordinates", "latitude": 37.7749, "longitude": -122.4194 } } </script>
Resource Pages:
LocalBusiness (Schema.org)
Schema.org examples for location pages (Google)
By implementing Local Business Schema Markup on a website, businesses can improve their chances of appearing in local search results, which can lead to increased visibility, traffic, and ultimately, more customers.
To implement Local Business Schema Markup, a business needs to include specific structured data on their website, which can be done using Schema.org markup language.
This involves using HTML tags to mark up the relevant information about the business, such as its name, address, phone number, and hours of operation.
Additionally, businesses can also include other types of structured data, such as customer reviews, ratings, and images, which can provide additional information to search engines and help improve the visibility of their local business listings.
Website Schema Markup
WebSite Schema Markup is a type of structured data markup that webmasters can add to their website’s HTML code to provide search engines with more detailed information about their website.
The schema markup helps search engines understand the purpose, content, and organisation of a website, making it easier for them to index and display the website’s content in relevant search results.
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "WebSite", "name": "", "url": "", "potentialAction": { "@type": "SearchAction", "target": "{search_term_string}", "query-input": "required name=search_term_string" } } </script>
Breadcrumb Schema
Breadcrumb Schema includes various types of data, such as the URL and title of each page in the breadcrumb trail, as well as the position of the current page in the trail.
By using this markup, webmasters can provide search engines with additional information about the structure of their websites and make it easier for them to understand the relationships between different pages and content.
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "", "item": "" },{ "@type": "ListItem", "position": 2, "name": "", "item": "" }] } </script>
Site Navigation
Site Navigation Schema Markup includes various types of data, such as the website’s navigation links, their URLs, and their relationships to other pages on the website.
By using this markup, webmasters can provide search engines with additional information about the structure of their websites and make it easier for them to understand the relationships between different pages and content.
<script type="application/ld+json"> {"@context":"http://schema.org", "@type":"ItemList", "itemListElement": [ { @type: "SiteNavigationElement", name: MMA Equipment", url:"https://www.blackbeltwhitehat.com/mma" }, { "@type": "SiteNavigationElement", "name": "Cricket Equipment", "url": "https://www.blackbeltwhitehat.com/cricket" }, { @type: "SiteNavigationElement", name: "Tennis Equipment", url:"https://www.blackbeltwhitehat.com/tennis" }, { @type: "SiteNavigationElement", name: "Golf Equipment", url:"https://www.blackbeltwhitehat.com//golf" }, { @type: "SiteNavigationElement", name: "Rugby Equipment", url:"https://www.blackbeltwhitehat.com/" }, { @type: "SiteNavigationElement", name: "Gym Equipment", url:"https://www.blackbeltwhitehat.com//gym-equipment" } ] } } </script>
These are just some of the most common schema markup types. There are many more schema types available for different types of content
The Sitelink Schema Markup consists of a set of HTML tags that are used to define the links that should be included as site links in the search results.
This can help Google to display more accurate and relevant site links in the search results, making it easier for users to find what they are looking for.
Event markup
Event – used to mark up information about an event such as its name, location, date, and time. Here’s an example of a standard event:
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "MusicEvent", "name": "AC/DC", "image": "http://s1.ticketm.net/tm/en-us/dbimages/199365a.jpg", "startDate": "2015-09-25T19:45:00-07:00", "url": "http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200", "location" : { "@type": "Place", "name": "AT&T Park", "sameAs": "http://www.ticketmaster.com/AT-T-Park-tickets-San-Francisco/venue/229585", "address" : { "@type": "PostalAddress", "streetAddress": "24 Willie Mays Plaza", "addressLocality":"San Francisco", "addressRegion":"CA", "postalCode":"94107", "addressCountry":"US" } }, "offers" : { "@type" : "Offer", "url":"http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200" } } </script>
Google Resource Page: Rich Snippets for Events.
Article Schema
Article – used to mark up information about an article such as its headline, author, and publication date.
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "Emmys 2015: The 5 categories we're most excited to see", "image": "http://rack.1.mshcdn.com/media/ZgkyMDE1LzA5LzIwLzQ0L2YyOGFiZmM5NmNkLmQ5ZjgxLmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/418b1a9e/940/f28abfc9-6cd9-217b-8bc7-fd48dd3621a9_MM714-21.jpg", "keywords": ["television","emmys","uncategorized","entertainment","tv","emmys-2015"], "datePublished": "2015-09-20T13:39:38Z", "articleSection": "entertainment", "creator": "Sandra Gonzalez", "author": "Sandra Gonzalez", "articleBody": "The 2015 Emmy Awards are upon us, and while television's biggest night has in several years etc....", "mainEntityOfPage": "True" } </script>
Resource Pages: Rich Snippets for Articles
Recipe Rich Snippet
Recipe – used to mark up information about a recipe such as its ingredients, cooking time, and nutritional information.
<div itemscope itemtype="http://schema.org/Recipe"> <link itemprop="url" href="http://allrecipes.com/recipe/12682/apple-pie-by-grandma-ople/" /> <meta itemprop="mainEntityOfPage" content="True" /> <img src="http://images.media-allrecipes.com/userphotos/720x405/736203.jpg" alt="Apple Pie by Grandma Ople" title="Apple Pie by Grandma Ople" itemprop="image" /> <h1 itemprop="name">Apple Pie by Grandma Ople</h1> <div itemprop="description">"This was my grandmother's apple pie recipe. I have never seen another one quite like it. It will always be my favorite and has won me several first place prizes in local competitions. I hope it becomes one of your favorites as well!"</div> Prep Time: <time itemprop="prepTime" datetime="PT30M">30 min</time> Cook Time: <time itemprop="cookTime" datetime="PT1H">1 hour</time> Total Time: <time itemprop="totalTime" datetime="PT1H30M">1 hour 30 min</time> Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span> Ingredients: <span itemprop="ingredients">1 recipe pastry for a 9 inch double crust pie</span> <span itemprop="ingredients">1/2 cup unsalted butter</span> <span itemprop="ingredients">3 tablespoons all-purpose flour</span> <span itemprop="ingredients">1/4 cup water</span> <span itemprop="ingredients">1/2 cup white sugar</span> <span itemprop="ingredients">1/2 cup packed brown sugar</span> <span itemprop="ingredients">8 Granny Smith apples - peeled, cored and sliced</span> <ol itemprop="recipeInstructions"> <li>Preheat oven to 425 degrees F (220 degrees C).</li> <li>Melt the butter in a saucepan. Stir in flour to form a paste.</li> </ol> </div>
Google Resource Page: Rich Snippets for Recipes
FAQ Schema in JSON-LD
FAQ – used to mark up frequently asked questions and their answers. Here’s an example of FAQPage in JSON-LD:
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": { "@type": "Question", "name": "", "acceptedAnswer": { "@type": "Answer", "text": "" } } } </script>
Video Rich Snippet
Video – used to mark up information about a video such as its title, description, and thumbnail.
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "VideoObject", "name": "Light at the End of the Tunnel", "@id": "http://videolectures.net/iswc2013_guha_tunnel/", "datePublished": "2013-11-28", "author": { "@type": "Person", "name": "Ramanathan V. Guha" }, "interactionStatistic": [ { "@type": "InteractionCounter", "interactionService": { "@type": "WebSite", "name": "YouTube", "@id": "https://youtube.com" }, "interactionType": "https://schema.org/LikeAction", "userInteractionCount": "512" }, { "@type": "InteractionCounter", "interactionService": { "@type": "SoftwareApplication", "name": "Twitter", "url": "https://www.twitter.com" }, "interactionType": "https://schema.org/LikeAction", "userInteractionCount": "1024" }, { "@type": "InteractionCounter", "interactionService": { "@type": "SoftwareApplication", "name": "Twitter", "url": "https://twitter.com" }, "interactionType": "https://schema.org/ShareAction", "userInteractionCount": "2345" }, { "@type": "InteractionCounter", "interactionService": { "@type": "WebSite", "name": "Facebook", "url": "https://www.facebook.com" }, "interactionType": "https://schema.org/LikeAction", "userInteractionCount": "1024" }, { "@type": "InteractionCounter", "interactionType": "https://schema.org/WatchAction", "userInteractionCount": "4356" } ] } </script>
Google Resource Page: Rich Snippets for Videos
How to Generate & Test Your Schema for Your HTML
Testing and generating your schema for your HTML can help ensure that your website’s content is properly structured and organized, which can improve search engine optimization (SEO) and user experience. Here are some steps to follow:
Step 1: Choose a Schema Type
The first step in generating a schema for your HTML is to choose a schema type. This is important because different schema types have different properties and fields, and you want to choose the one that best fits your website’s content.
Schema.org is a great resource for finding the right schema type for your content. You can browse the different types of schemas on the website and choose the one that fits your website’s content.
Step 2: Create a JSON-LD File
Once you have chosen a schema type, the next step is to create a JSON-LD file that contains the schema markup for your content. JSON-LD (JavaScript Object Notation for Linked Data) is a format for embedding structured data into web pages.
You can create a JSON-LD file manually or use a tool like Google’s Structured Data Markup Helper. The Markup Helper allows you to select the schema type you want to use, enter your content, and generate the JSON-LD code.
When creating your JSON-LD file, make sure to include all the necessary fields and properties for your schema type. For example, if you’re using the “Article” schema type, you’ll need to include fields for the article title, author, date, and body content.
Step 3: Add the Schema Markup to Your HTML
Once you have generated your JSON-LD code, the next step is to add it to your HTML code. You can do this by including the code in the head section of your web page.
To add the JSON-LD code to your HTML, you must open your HTML file and locate the head section. Within the head section, you’ll need to add a script tag that contains your JSON-LD code.
For example, if you’re using the “Article” schema type, your code might look something like this:
Make sure to include the entire JSON-LD code, including the opening and closing script tags, within the head section of your HTML code.
Step 4: Test the Schema Markup
After you have added the schema markup to your HTML, the next step is to test it. This is important because you want to ensure that your schema markup is working properly and that there are no errors.
There are several tools you can use to test your schema markup. One of the most popular is Google’s Structured Data Testing Tool.
To use this tool, simply enter the URL of your web page and click the “Run Test” button. The tool will analyze your code and provide feedback on any errors or warnings.
Benefits of Schema Markup & Why It’s Important for SEO
One of the key benefits of using schema markup for SEO is that it can help improve the visibility and appearance of search results.
By providing additional information about the content on a page, search engines may be more likely to display rich snippets or other enhanced features, such as an image or video thumbnails, in the search results. This can help attract more clicks and traffic to a website.
Schema markup is important for your website for several reasons:
Better search engine visibility:
Schema markup provides search engines with more context about your website’s content, making it easier for them to understand and index your pages. This can lead to better search engine rankings and more visibility for your website.
Richer search results:
By using schema markup, you can enhance your search results with additional information such as reviews, ratings, and product details. This can make your search results more attractive and compelling to users, increasing the likelihood that they will click through to your website.
Increased click-through rates:
With schema markup, your search results can include rich snippets that provide more information about your content. This can make your search results stand out from the competition and increase click-through rates.
Improved user experience:
By providing more information about your content through schema markup, you can improve the user experience on your website. Users can quickly and easily find the information they are looking for, which can lead to higher engagement and conversions.
Better user experience:
Schema markup can improve the user experience by providing more accurate and relevant information in search results. This can lead to more engaged users and lower bounce rates, which can improve your overall SEO performance.
Future-proofing:
As search engines continue to evolve and improve their algorithms, schema markup is likely to become even more important for SEO. By implementing schema markup now, you can future-proof your website and stay ahead of the curve.
Overall, schema markup is an important tool for improving the visibility, relevance, and user experience of your website. By implementing schema markup on your website, you can enhance your search engine rankings, attract more traffic, and increase engagement and conversions.
Schema Markup Generator Tools
There are several schema markup generator and testing tools available online that can help you create, check and add schema markup code for your website. Some of the popular ones include:
- Google Structured Data Markup Helper: This is a free tool provided by Google that allows you to add structured data markup to your website. You can use it to create the markup for different types of content, such as articles, events, products, and more.
- Schema.org Generator: This is a free tool that allows you to create schema markup for various types of content, such as products, recipes, and events. It provides a simple interface where you can enter the necessary information and generate the code.
- Microdata Generator: This is a free tool that allows you to create microdata markup for your website. It supports different types of content, such as articles, products, and reviews.
- Merkle Schema Markup Generator: This is a free tool that allows you to create schema markup for your website. It supports different types of content, such as products, events, and recipes. It provides a simple interface where you can enter the necessary information and generate the code.
- JSON-LD Schema Generator: This is a free tool that allows you to create JSON-LD markup for your website. It supports different types of content, such as articles, products, and events. It provides a simple interface where you can enter the necessary information and generate the code.
These are just a few examples of the many schema markup generator tools and structured data testing tools available online. It’s important to choose a tool that supports the type of content you want to markup and that provides a user-friendly interface to create and edit your markup.